<template>
  <div class="page">
    <div>
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">全部分类</span>
            </el-menu-item>
            <div v-for="item in goodsTypelist" :key="item.id">
              <el-menu-item :index="item.id" @click="test(item.id)">
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
              <div> <img class="imgtemp" :src="item.img"></div>
            </div>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import remote from '@/utils/http'
import PageSide from '@/components/pages/PageSide'

export default {
  name: 'Test3',
  components: {PageSide},
  data () {
    return {
      goodsTypelist: []
    }
  },
  created () {
    this.earntype()
  },
  methods: {
    // 获取分类
    earntype () {
      remote('earntype', false, {}).then(res => {
        console.log(res.data, '接收到的数据')
        if (res.code === 0) {
          this.goodsTypelist = res.data.map(item => {
            return {
              describe: item.describe,
              id: item.id,
              img: 'http://www.kkw.com/upload/' + item.img,
              name: item.name
            }
          })
          console.log(this.goodsTypelist, '1111111111111111')
        } else {
          alert('出错了')
        }
      })
    },
    test ($index) {
      console.log($index, 'hahhhh1')
    }
  }
}
</script>

<style scoped>
  .page{
    width: 400px;
    padding: 50px 100px;
  }
  .imgtemp{
    width: 60px;
    height: 60px;
  }
</style>
